<template>
<div>
  <el-input clearable placeholder="请输入用户查询" style="width: 260px; margin-right: 10px"
            v-model="username"></el-input>
  <el-input clearable placeholder="请输入访问类型查询" style="width: 260px; margin-right: 10px"
            v-model="type"></el-input>
  <el-date-picker
      v-model="timevalue"
      type="datetimerange"
      :picker-options="pickerOptions"
      value-format="timestamp"

      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      size="small"
      align="right">
  </el-date-picker>
  <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
  <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>

  <div class="table">
    <el-table align="center" :data="tableData" strip @selection-change="handleSelectionChange" @cell-click="detail" >

      <el-table-column prop="id" label="编号" width="70" align="center"></el-table-column>
      <el-table-column prop="userId" label="用户id" show-overflow-tooltip></el-table-column>
      <el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="productId" label="产品id" show-overflow-tooltip></el-table-column>
      <el-table-column prop="title" label="产品名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="categoryId" label="分类id" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="分类名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="type" label="操作类型" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createdTime" label="生成时间" show-overflow-tooltip></el-table-column>
    </el-table>

    <div class="pagination" style="margin-left: 500px">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>



</div>
</template>

<script>
import hljs from "highlight.js";
export default {
  name: "Blog",
  data() {
    return {
      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,
      username:'',
      type:'',
      timevalue: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date().getTime()],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
            picker.$emit('pick', [start, end]);
          }
        }
        ]
      },
    }
  },
  created() {
this.load(1)
  },
  methods: {
    load(pageNum) {  // 分页查询

      if (pageNum) this.pageNum = pageNum
      this.$request.get('/scene/userTrack', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username,
          type:this.type,
          start: this.timevalue[0],
          end: this.timevalue[1],
        }
      }).then(res => {
        this.tableData = res.data?.list
        let i=0
        while (this.tableData[i]!=undefined){
          switch (this.tableData[i].type){
            case 'pv':
              this.tableData[i].type='浏览'
                  break
            case 'favorite':
              this.tableData[i].type='收藏'
              break
            case 'cart':
              this.tableData[i].type='加入购物车'
              break
            case 'pv':
              this.tableData[i].type='浏览'
              break
          }

          i++
        }
        this.total = res.data?.total
        console.log(this.tableData, "分页结果")
      })
    },
    reset() {
      this.username=''
      this.type=''
      this.timevalue=[new Date().getTime() - 3600 * 1000 * 24 * 7, new Date().getTime()]
      this.load(1)
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)   //  [1,2]
    },

    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
  }
}
</script>

<style scoped>

</style>